<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渲染数据案例</title>
    <style>
      table {
        width: 500px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <table border="1" cellspacing="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>名字</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
    <script>
      var userList = [
        { id: 1, name: "jack", age: 18, gender: "男" },
        { id: 2, name: "Rose", age: 20, gender: "女" },
        { id: 3, name: "Tom", age: 22, gender: "男" },
        { id: 4, name: "Jerry", age: 24, gender: "女" },
      ];
      var tbody = document.querySelector("tbody");
      var str = "";
      userList.forEach(function (item) {
        str += "<tr>";
        for (var k in item) {
          str += "<td>" + item[k] + "</td>";
        }
        str += "</tr>";
      });
      console.log(str);
      tbody.innerHTML = str
    </script>
  </body>
</html>
